<template>

    <!-- <slot name="header" :msg="childMessage"></slot> -->
    <slot name="main"></slot>

    <div class="header1" :msg="childMessage">
        <slot name="header"></slot>
        {{ childMessage }}
    </div>

</template>

<script>
export default {
    data() {
        return {

            childMessage: "子数据"
        }
    },
}


</script>

<style scoped>
.header1 {
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    background-color: red;
    padding: 10px;
    text-align: center;
}
</style>